/**
 * @description 选项卡功能实现
 * @author kevinE <kevin-e-e@foxmail.com> 
 * @version v2.0 2022-9-1 08:45:41
 */
(() => {
	/**
	 * @param {Object} par {
		tabId: 选项卡容器ID,
		titleClass: 选项标题类名,
		contentClass: 选项内容类名,
		activeClass: 激活状态类名,
		callBack: 点击选项标题回调函数,
	 }
	 */
	function Tabbar(par) {
		// 当前选择的标签下标
		this.active = 0;
		// 最近一次选择的标签下标
		this.last = 0;
		// 选项卡标题节点
		this.titleList = null;
		// 选项卡内容节点
		this.contentList = null;
		
		// 选项卡容器ID
		let tabId = par.tabId;
		if (!tabId) throw new Error('参数丢失：tabId');
		// 选项卡标题类名
		let titleClass = par.titleClass;
		if (!titleClass) throw new Error('参数丢失：titleClass');
		this.titleList = $('#'+tabId+' .'+titleClass);
		// 选项卡内容类名
		let contentClass = par.contentClass;
		if (contentClass) this.contentList = $('#'+tabId+' .'+contentClass);
		// 选项标题长度不等于选项内容长度
		if (this.titleList.length !== this.contentList.length) console.warn("标题数量与内容数量不对等");
		// 激活状态类名
		let activeClass = par.activeClass || 'active';
		// 点击选项卡的回调
		let callBack = par.callBack;
		
		
		// 绑定标题点击事件
		bindTitleClick = () => {
			let list = this.titleList;
			for (let i = 0; i < list.length; i++) {
				list[i].onclick = () => {
					// 如果点击的是当前选择的选项则不做操作
					if (i === this.active) return;
					this.select(i);
				};
			}
		}
		
		bindTitleClick();
		
		// 选中指定选项卡
		this.select = function(idx) {
			// 激活点击的标题
			this.titleList[idx].classList.add(activeClass);
			// 取消显示的标题
			this.titleList[this.active].classList.remove(activeClass);
			// 激活点击标题对应内容
			if (this.contentList[idx]) this.contentList[idx].classList.add(activeClass);
			// 取消显示标题对应内容
			if (this.contentList[this.active]) this.contentList[this.active].classList.remove(activeClass);
			// 更新显示下标
			this.last = this.active;
			this.active = idx;
			// 选项标题被点击的回调
			callBack && callBack(this);
		}
		return this;
	}
	window.Tabbar = Tabbar;
})();
